<template>
  <dv-border-box-11 class="background" style="width: 100%;height: 100%;" title="大数据可视化平台">
    <el-dialog
      title="治理建议"
      :visible.sync="dialogVisible"
      width="30%"
      >
      <span>报修人数:以园林绿化类为多数</span><br>
      <span>公交车:以三号线较拥挤</span><br>
      <span>建议规划三号线出行路线</span><br>
      <span>坐车年龄:以青壮年为多数</span><br>
      <span>房屋出租:以周日出租为多数</span><br>
      <span>村民关注热点:今日以家人超市打折为最热点</span><br>
      <span>村民实际较为关注经济类</span><br>
    </el-dialog>
    <div class="panel-Template" style="height: 7%;width: 100%;"></div>
    <span class="panel-Template" style="height: 100%;width: 0.5%"></span>
    <!--    第一个大界面的小界面,高48% 宽100% 占据在屏幕上方约二分之一-->
    <div class="mainBigPanel panel-Template" style="width: 99%;height: 44%;">
      <dv-border-box12 class="panel-Template" style="width: 33%;height: 100%;">
        <div id="option1" class="echartsPanel" />
      </dv-border-box12>
<!--      <dv-border-box12 class="panel-Template" style="width: 18%;height: 100%;">-->
<!--        <div id="option2" class="echartsPanel" />-->
<!--      </dv-border-box12>-->
      <div style="width: 34%;height: 100%;" class="panel-Template">
        <div style="float:left;height: 3%;width: 100%"></div>
        <div style="height: 30%;width: 100%" >
          <div class="smallText" v-for="(item,key) in echartsOption.smallTexts" :key="key">
            <div>{{item.name}}</div>
            <div>{{item.number}}</div>
          </div>
        </div>
        <div style="float: left;width: 60%;height: 67%" id="option2"></div>
        <div style="float: left;width: 40%;height: 67%">
<!--          <div style="float:left;width: 100%;height: 50%" id="option4"></div>-->
          <dv-percent-pond :config="{value: 66}" style="float:left;width: 100%;height: 50%" />
          <dv-water-level-pond  :config="{data: [66],waveHeight: '10'}" style="float:left;width: 100%;height: 50%"></dv-water-level-pond>
        </div>
      </div>
      <dv-border-box12 class="panel-Template" style="width: 18%;height: 100%;">
        <div id="option3" class="echartsPanel" />
      </dv-border-box12>
      <dv-border-box12 class="panel-Template" style="width: 15%;height: 100%;">
        <div id="option4" class="echartsPanel" />
      </dv-border-box12>
    </div>
    <!--    第一个大界面的小界面,高48% 宽100% 占据在屏幕上方约二分之一-->
    <div class="mainBigPanel panel-Template" style="width: 99%;height: 49%;">
      <dv-border-box12 class="panel-Template" style="width: 50%;height: 100%;">
        <div class="echartsPanel" id="option5"/>
      </dv-border-box12>
      <dv-border-box12 class="panel-Template" style="width: 50%;height: 100%;">
        <div class="echartsPanel" id="option6" />
      </dv-border-box12>
    </div>
  </dv-border-box-11>
</template>
<script>
import villageMainInfo from '../../../assets/villageMainInfo'
export default {
  name: 'villageMainInfo',
  data () {
    return {
      echartsOption: villageMainInfo,
      dialogVisible: false
    }
  },
  methods: {
    drawEcharts (divId, option) {
      let mycharts = this.$echarts.init(document.getElementById(divId))
      // 绘制图表
      mycharts.setOption(option)
      mycharts.getZr().on('click', params => {
        this.clickTitle()
      })
    },
    clickTitle () {
      this.dialogVisible = true
    }
  },
  mounted () {
    this.drawEcharts('option1', this.echartsOption.option1)
    this.drawEcharts('option2', this.echartsOption.option2)
    this.drawEcharts('option3', this.echartsOption.option3)
    this.drawEcharts('option4', this.echartsOption.option4)
    this.drawEcharts('option5', this.echartsOption.option5)
    this.drawEcharts('option6', this.echartsOption.option6)
  }
}
</script>

<style scoped>
.background{
  background-color: #06092c;
}
.panel-Template{
  float: left;
}
#panel2{
  width: 100%;
  height: 100%;
}
#panel3{
  margin-top: 10%;
  margin-left: 10%;
}
#panel4{
  margin-top: 5%;
  margin-left: 5%;
}
.rotationTable{
  margin-top: 5%;
  margin-left: 5%;
}
.echartsPanel{
  width:100%;
  height:100%;
}
.smallText{
  width: 30%;
  height: 50%;
  float: left;
  padding: 0 1.66%;
  color: #2869db;
}
.smallText div:first-child{
  float: left;
  width: 100%;
  text-align: left;
  font-size: 3px;
}
.smallText div:nth-child(2){
  float: left;
  font-size: 25px;
  color: #47d4c4;
}
</style>
